import { FC, memo } from 'react'
import { LtMenuWrapper } from './style'

interface IState {
  children?: React.ReactNode
  isTitle: boolean
  item: any
  path: string
  clickHandle?: (e: any) => void
}

const LtMenu: FC<IState> = memo((props) => {
  const { isTitle, item, path, clickHandle } = props

  const clickHandleFn = () => {
    clickHandle && clickHandle(item)
  }
  return (
    <LtMenuWrapper onClick={clickHandleFn}>
      <div className="left">
        {item.icon && (
          <span
            className={`iconfont icon ${item.icon} ${path === item.path ? 'active_icon' : ''}`}
          ></span>
        )}
        {item.img && <img src={require(`@/assets/image/game/${item.img}`)} alt="poster" className="img" />}
      </div>
      {isTitle ? (
        <div className="right">
          <span className={`title ${path === item.path ? 'active_text' : 'd'}`}>{item.title}</span>
        </div>
      ) : (
        ''
      )}
    </LtMenuWrapper>
  )
})

export default LtMenu
